import React, { useMemo, useState } from "react";
import { Breadcrumb, Button, Card, Col, Input, Radio, Row, Select, Space, Tag, Typography } from "antd";
import { PlusOutlined, ToTopOutlined } from "@ant-design/icons";
import StyleLess from "./Chart.module.less";
// import './Chart.less'

type Item = {
    id: number;
    name: string;
    version: string;
    category: string; // 装饰部件/标题/文字/标签
    type: string; // 一级左标题/二级右标题 等
    tags: string[];
    openSource: boolean;
    creator: string;
};

const { Title } = Typography;

const categories = ["全部", "装饰部件", "echarts图", "表格", "标题", "地图"];
const types = ["一维数据", "二维数据", "三维数据", "无"];

function createMockData(count = 100): Item[] {
    const names = ["垂直五分割线", "垂直五分割线", "背景图", "大屏标题", "一级左标题", "二级右标题"];
    const creators = ["凌空", "匿名", "小明", "设计组"];
    const tags = ["蓝色", "发光", "标题", "装饰", "分割线"];
    const list: Item[] = [];
    for (let i = 0; i < count; i++) {
        list.push({
            id: i + 1,
            name: names[i % names.length],
            version: i % 3 === 0 ? "2.0.0" : "1.0.0",
            category: categories[(i % (categories.length - 1)) + 1], // 不含“全部”
            type: types[i % types.length],
            tags: [tags[i % tags.length]],
            openSource: i % 2 === 0,
            creator: creators[i % creators.length],
        });
    }
    return list;
}

const dataSource = createMockData(100);

function Chart() {
    const [category, setCategory] = useState<string>("全部");
    const [type, setType] = useState<string | undefined>();
    const [name, setName] = useState<string>("");
    const [tag, setTag] = useState<string>("");
    const [openSource, setOpenSource] = useState<string>("全部");
    const [creator, setCreator] = useState<string>("");
    const [grid, setGrid] = useState<boolean>(true);

    const filtered = useMemo(() => {
        return dataSource.filter((it) => {
            if (category !== "全部" && it.category !== category) return false;
            if (type && it.type !== type) return false;
            if (name && !it.name.includes(name)) return false;
            if (tag && !it.tags.join(",").includes(tag)) return false;
            if (openSource !== "全部") {
                const flag = openSource === "开源";
                if (it.openSource !== flag) return false;
            }
            if (creator && !it.creator.includes(creator)) return false;
            return true;
        });
    }, [category, type, name, tag, openSource, creator]);

    const reset = () => {
        setCategory("全部");
        setType(undefined);
        setName("");
        setTag("");
        setOpenSource("全部");
        setCreator("");
    };

    return (
        <div>
            {/* 顶部筛选区 */}
            <Space direction="vertical" style={{ width: "100%" }} size="middle">
                {/* 分类类型 */}
                <Space wrap>
                    <span>图形类型：</span>
                    {categories.map((c) => (
                        <Button key={c} type={category === c ? "primary" : "default"} onClick={() => setCategory(c)}>
                            {c}
                        </Button>
                    ))}
                </Space>

                {/* 组件类型 */}
                <Space wrap>
                    <span>组件类型：</span>
                    <Select allowClear placeholder="请选择类型" style={{ minWidth: 160 }} value={type} onChange={setType} options={types.map((t) => ({ label: t, value: t }))} />
                </Space>

                {/* 搜索区 */}
                <Space wrap>
                    <span>名称：</span>
                    <Input placeholder="请输入" value={name} onChange={(e) => setName(e.target.value)} style={{ width: 180 }} />
                    <span>标签：</span>
                    <Input placeholder="请输入" value={tag} onChange={(e) => setTag(e.target.value)} style={{ width: 180 }} />
                    <span>是否内置：</span>
                    <Select
                        style={{ width: 140 }}
                        value={openSource}
                        onChange={setOpenSource}
                        options={[
                            { value: "全部", label: "全部" },
                            { value: "内置", label: "内置" },
                            { value: "非内置", label: "非内置" },
                        ]}
                    />
                    <span>创建者：</span>
                    <Input placeholder="请输入" value={creator} onChange={(e) => setCreator(e.target.value)} style={{ width: 160 }} />
                    <Button type="primary">查询</Button>
                    <Button onClick={reset}>重置</Button>
                </Space>

                {/* 列表头 */}
                <Space style={{ width: "100%", justifyContent: "space-between" }}>
                    <div className={StyleLess.listTitle}>图形列表（{filtered.length}）</div>
                    <div className={StyleLess.listChange}> 
                        <Button type="primary" icon={<ToTopOutlined />} />
                        <Button type="primary" icon={<PlusOutlined />} />
                        <Radio.Group value={grid} onChange={(e) => setGrid(e.target.value)}>
                            <Radio.Button value={true}>网格</Radio.Button>
                            <Radio.Button value={false}>列表</Radio.Button>
                        </Radio.Group>
                    </div>
                </Space>
            </Space>

            {/* 列表 */}
            {grid ? (
                <Row gutter={[16, 16]} style={{ marginTop: 12 }}>
                    {filtered.map((it) => (
                        <Col key={it.id} xs={24} sm={12} md={8} lg={6} xl={6}>
                            <Card
                                hoverable
                                cover={
                                    <div style={{ height: 140, background: "#0d1b2a", display: "flex", alignItems: "center", justifyContent: "center" }}>
                                        <span style={{ color: "#8ab4f8" }}>{it.name}</span>
                                    </div>
                                }>
                                <Space direction="vertical" style={{ width: "100%" }} size={8}>
                                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                                        <span>{it.name}</span>
                                        <span style={{ color: "#888" }}>{it.version}</span>
                                    </div>
                                    <Space wrap>
                                        <Tag>{it.category}</Tag>
                                        <Tag>{it.type}</Tag>
                                        {it.tags.map((t) => (
                                            <Tag key={t}>{t}</Tag>
                                        ))}
                                    </Space>
                                </Space>
                            </Card>
                        </Col>
                    ))}
                </Row>
            ) : (
                <Space direction="vertical" style={{ width: "100%", marginTop: 12 }} size="small">
                    {filtered.map((it) => (
                        <Card key={it.id}>
                            <div style={{ display: "flex", alignItems: "center", gap: 16 }}>
                                <div style={{ width: 120, height: 70, background: "#0d1b2a" }} />
                                <div style={{ flex: 1 }}>
                                    <div style={{ display: "flex", justifyContent: "space-between" }}>
                                        <strong>{it.name}</strong>
                                        <span style={{ color: "#888" }}>{it.version}</span>
                                    </div>
                                    <Space wrap>
                                        <Tag>{it.category}</Tag>
                                        <Tag>{it.type}</Tag>
                                        {it.tags.map((t) => (
                                            <Tag key={t}>{t}</Tag>
                                        ))}
                                    </Space>
                                </div>
                            </div>
                        </Card>
                    ))}
                </Space>
            )}
        </div>
    );
}

export default Chart;
